<template>
  <!-- 自定义卡片内容 -->
  <view class="flex content-center justify-between" @click="jumpToDetail">
    <!-- 左侧商品图片 -->
    <view class="mr-[20rpx]">
      <image :src="data.imgUrl" class="w-152rpx h-152rpx" />
      <!-- 促销标签 -->
      <!-- <view class="promotion-tag"></view> -->
    </view>

    <!-- 右侧内容区域 -->
    <view class="flex-1 flex flex-col">
      <!-- 商品标题和描述 -->
      <view class="text-size-1 color-text-1 font-500">{{ data.title }}</view>
      <view class="text-[20rpx] color-text-2 mt-[6rpx]">
        {{ data.description }}
      </view>
      <view class="color-text-2 text-[24rpx] leading-none flex-1 mt-[12rpx]">
        <text>库存：</text>
        <text>{{ data.stock }}</text>
      </view>
      <!-- 价格区域 -->
      <view class="flex justify-between content-center gap-2">
        <view class="price-left center">
          <view class="current-price text-danger-6">
            <text class="text-size-1 DIN">￥</text>
            <text class="text-size-7 DIN">{{ data.price }}</text>
          </view>
        </view>
        <view class="price-right" v-if="props.showSpecBtn">
          <wd-input-number
            custom-class="input-number"
            v-model="data.num"
            @change="handleNumberChange"
          />
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
defineOptions({
  options: {
    styleIsolation: "shared",
  },
});
const props = defineProps({
  data: {
    type: Object,
    default: function () {
      return {};
    },
    showSpecBtn: {
      type: Boolean,
      default: () => true,
    },
  },
});

const handleNumberChange = (value) => {
  console.log(value);
};
const jumpToDetail=()=>{
  uni.navigateTo({
   url:'/pagesGoods/goodsDetail' 
  }
  )
}
</script>

<style lang="scss" scoped>
.price-right {
  :deep() {
    .input-number {
      .wd-input-number__action {
        background: var(--free-primary-6);
        border-radius: 88rpx;
        width: 34rpx;
        height: 34rpx;
        line-height: 34rpx;
        text-align: center;
        &::after {
          display: none;
        }
      }
      .wd-input-number__input-border {
        display: none;
      }
      .wd-icon {
        color: #fff;
        font-size: 22rpx;
      }
    }
  }
}
</style>
